<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <meta name="viewport" content="width=device-width"/>

    <meta name="keywords" content="网页关键词 必填" />
    <meta name="description" content="网页描述 必填" />
    <meta itemprop="name" content="QQ分享标题 必填" />
    <meta itemprop="image" content="QQ分享图片链接 可选（不填则删除）" />
    <meta name="description" itemprop="description" content="QQ分享描述 必填" />

    <title>网页标题</title>
    <link rel="stylesheet" type="text/css" href="assets/css/plugin.css">
    <link rel="stylesheet" type="text/css" href="assets/css/base.css">

<script type="text/javascript">
    (function() {
        var docElement = document.documentElement,
            metaElement = document.querySelector('meta[name="viewport"]'),
            styleElement = document.createElement("style"),
            version,
            screenScale = 1,
            originScreenW = 750,
            originScreenH = 1206,
            screenW = window.screen.width,
            screenH = window.screen.height;
        screenScale = parseInt(screenW) / 750;
        if (/Android (\d+\.\d+)/.test(navigator.userAgent)) {
            version = parseFloat(RegExp.$1);
            if (version > 2.3) {
                metaElement.setAttribute("content", "width=750,minimum-scale=" + screenScale + ",maximum-scale=" + screenScale + ",target-densitydpi=device-dpi")
            } else {
                metaElement.setAttribute("content", "width=750,target-densitydpi=device-dpi")
            }
        } else {
            metaElement.setAttribute("content", "width=750,user-scalable=no,target-densitydpi=device-dpi")
        }
    })();
</script>
</head>

<body>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <!--<section class="swiper-slide"  style="width: 640px; height: 1008px;-webkit-background-size:cover ;background-size:contain ; background:url(assets/images/page1/bk.jpg) no-repeat left top;">-->
            <!--<img src="images/page1/line.png" id="page1-line" class="ani resize" style="opacity:0;width:640px;height:1008px;left:0px;top:0px;z-index:3;" swiper-animate-effect="fadeIn" >-->
            <!--<img src="images/page1/bird.png" id="page1-bird" class="ani resize" style="opacity:0;width:220px;height:390px;left:0;top:618px;z-index:4;" swiper-animate-effect="fadeIn" >-->
            <!--<img src="images/page1/cricle.png" id="page1-cricle" class="ani resize" style="width:496px;height:510px;left:72px;top:96px;z-index:5;" >-->
            <!--<img src="images/page1/go.png" id="page1-go" class="ani resize"-->
                 <!--style="width:193px;height:291px;left:225px;top:718px;z-index:5;opacity: 0;"-->
            <!--&gt;-->
        <!--</section>-->
        <section class="swiper-slide"  style="width: 640px; height: 1008px;-webkit-background-size:cover ;background-size:contain ; background:url(assets/images/page2/bk.jpg) no-repeat left top;">
            <img src="images/page2/titile.png" id="page2-title" class="ani resize" style="opacity:0;width:591px;height:174px;right:0px;top:0px;z-index:3;"  >
            <img src="images/page2/text.png" id="page2-text"  class="ani resize" style="opacity:0;width:507px;height:267px;left:42px;top:239px;z-index:4;"  >
            <img src="images/page2/pic2.png" id="page2-pic2" class="ani resize" style="opacity:0;width:442px;height:247px;left:47px;top:555px;z-index:4;"  >
            <img src="images/page2/pic1.png" id="page2-pic1" class="ani resize" style="opacity:0;width:152px;height:145px;left:436px;top:480px;z-index:5;"  >
            <img src="images/page2/bottom.png" id="page2-bottom" class="ani resize" style="opacity:0;width:640px;height:139px;left:0px;top:869px;z-index:6;"   >
            <img src="images/page2/leftbird.png" id="page2-leftbird" class="ani resize" style="opacity:0;width:50px;height:45px;left:274px;top:893px;z-index:6;" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s"  >
            <img src="images/page2/rightbird.png"  id="page2-rightbird" class="ani resize" style="opacity:0;width:52px;height:45px;left:324px;top:893px;z-index:6;" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s"  >
            <img src="images/page2/point.png"  id="page2-point" class="ani resize" style="opacity:0;width:45px;height:24px;left:20px;top:20px;z-index:7;" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s"  >


        </section>
        <div class="swiper-slide">Slide 3</div>
    </div>
</div>
<!--<div class="swiper-container">-->
<!--<div class="swiper-wrapper">-->
<!--&lt;!&ndash;-&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;slide1-&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&ndash;&gt;-->


<!--&lt;!&ndash;-&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;slide2-&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&ndash;&gt;-->


<!--</div>-->
<!--</div>-->
<script type="text/javascript" src="assets/js/vendor.js"></script>
<script type="text/javascript" src="assets/js/plugins.js"></script>
<script type="text/javascript" src="assets/js/page/main.js"></script>
<script>
    var mySwiper = new Swiper ('.swiper-container', {
        direction : 'vertical',
        pagination: '.swiper-pagination',
        mousewheelControl : true,
        onInit: function(swiper){
            swiperAnimateCache(swiper);
            swiperAnimate(swiper);
        },
        onSlideChangeEnd: function(swiper){
            swiperAnimate(swiper);
        }
    })
</script>
</body>
</html>